<template>
  <div style="border: 1px solid rgb(230, 230, 230);padding: 10px;">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="登录用户">
          <el-input placeholder="登录用户" style="width: 100%;" clearable />
        </el-form-item>
      </el-col>
      <!-- 时间 -->
      <el-col :span="10" :offset="1">
        <div class="block">
          <span class="demonstration">操作时间 </span>
          <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" :shortcuts="shortcuts" :size="size" />
        </div>
      </el-col>

    </el-row>

    <el-row>
      <el-col :span="2">
        <el-button type="primary"><el-icon style="margin-right: 5px;">
            <Search />
          </el-icon>搜索</el-button>
      </el-col>
      <el-col :span="2">
        <el-button><el-icon style="margin-right: 5px;">
            <Refresh />
          </el-icon>重置</el-button>
      </el-col>
    </el-row>
  </div>


  <el-table :data="tableData" border stripe style="width: 100%;margin-top: 20px;">
    <el-table-column prop="date" label="序号" width="80" />
    <el-table-column prop="name" label="登录账户" width="180" />
    <el-table-column prop="address" label="登录IP地址" />
    <el-table-column prop="address" label="状态" width="100" />
    <el-table-column prop="address" label="提示信息" />
    <el-table-column prop="address" label="创建时间" />
  </el-table>
  <div class="demo-pagination-block">

    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[100, 200, 300, 400]"
      :size="size" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
      :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

</template>
<script lang="ts" setup>

import { ref } from 'vue'
import type { ComponentSize } from 'element-plus'

const currentPage4 = ref(4)

const pageSize4 = ref(100)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}


// 时间
const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
    text: 'Last week',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: 'Last month',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: 'Last 3 months',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

// 表格数据
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: '1',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: '1',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: '1',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: '1',
  },
]
</script>

<style scoped>
.demo-pagination-block {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}
</style>